<!--
  ~ Electronic Logistics Management Information System (eLMIS) is a supply chain management system for health commodities in a developing country setting.
  ~
  ~ Copyright (C) 2015  John Snow, Inc (JSI). This program was produced for the U.S. Agency for International Development (USAID). It was prepared under the USAID | DELIVER PROJECT, Task Order 4.
  ~
  ~ This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
  ~
  ~ This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details.
  ~
  ~ You should have received a copy of the GNU Affero General Public License along with this program.  If not, see <http://www.gnu.org/licenses/>.
  -->
<style>
    .ng-table th.sortable div {
        /* css-3 */
        white-space: -o-pre-wrap;
        word-wrap: break-word;
        white-space: pre-wrap;
        white-space: -moz-pre-wrap;
        white-space: -pre-wrap;
    }
    table {
        table-layout: fixed;
        width: 100%;
    }
</style>
<div class="row-fluid">
    <div class="box span12">
        <div class="box-header">
            <h2 openlmis-message="report.title.lab.equipment.by.funding"><i class="icon-edit"></i><span class="break"></span></h2>

            <div class="box-icon">
              <a id="pdf-button" ng-show="filterForm.$valid" href="" ng-click="exportReport('PDF')" class='btn-small btn-info'><span openlmis-message="label.pdf"></span></a>
              <a id="xls-button" ng-show="filterForm.$valid" href="" ng-click="exportReport('XLS')" class='btn-small btn-info'><span openlmis-message="label.excel"></span></a>
            </div>
        </div>

        <div class=row-fluid>
            <div class="sidebar">
                <div class="app-form" style="padding: 5px;">
                    <form ng-submit="filterGrid()"  name="filterForm" novalidate>
                        <div filter-container class="clearfix">
                            <program-filter class="form-cell horizontalFilters" required="true"></program-filter>
                            <zone-filter class="form-cell horizontalFilters"></zone-filter>
                            <donor-filter class="form-cell horizontalFilters"></donor-filter>
                            <facility-type-filter class="form-cell horizontalFilters" ></facility-type-filter>
                            <facility-filter class="form-cell horizontalFilters"></facility-filter>
                            <equipment-type-filter class="form-cell horizontalFilters"></equipment-type-filter>
                            <equipment-filter class="form-cell horizontalFilters"></equipment-filter>
                        </div>
                    </form>
                </div>
            </div>
            <div class="content-body">
                <table class="table table-bordered" ng-show="data == undefined || data.length == 0">
                    <tr>
                        <td>No data to show under selected filters</td>
                    </tr>
                </table>
                <div ng-show="datarows.length > 0">
                    <div client-side-sort-pagination class="pull-right legend">Page: {{tableParams.page}}, Showing records {{ ((tableParams.page - 1) *
                        tableParams.count) + 1 }} to {{ (tableParams.page ) * tableParams.count }} of {{tableParams.total}}
                    </div>

                    <div class="table-responsive">
                            <table  ng-show="datarows.length > 0" class="table-bordered table table-striped" ng-table="tableParams">
                                <tbody>
                                <tr ng-repeat="row in datarows">
                                    <td  data-title="'#'" class="number" style="width:20px">{{ row.no }}</td>
                                    <td data-title="getLocalMessage('label.district')" sortable="district">{{row.district}}</td>
                                    <td data-title="getLocalMessage('label.primary.donor')" sortable="donor">{{row.donor}}</td>
                                    <td data-title="getLocalMessage('label.funding.source')" sortable="sourceoffund">{{row.sourceoffund}}</td>
                                    <td data-title="getLocalMessage('label.equipment.name')" sortable="equipment_name">{{ row.equipment_name }}</td>
                                    <td data-title="getLocalMessage('label.equipment.model')" style="width:80px" sortable="model">{{ row.model }}</td>
                                    <td data-title="getLocalMessage('label.equipment.year.of.installation')"  sortable="yearofinstallation">{{ row.yearofinstallation }}</td>
                                    <td data-title="getLocalMessage('label.equipment.has.service.contract')"  sortable="test">{{row.hasservicecontract}}</td>
                                    <td data-title="getLocalMessage('label.equipment.end.date.of.service.contract')" sortable="servicecontractenddate">{{row.servicecontractenddate | date }}</td>
                                    <td data-title="getLocalMessage('label.is.active')"  sortable="isactive">{{ row.isactive }}</td>
                                    <td data-title="getLocalMessage('label.equipment.date.decommissioned')" sortable="datedecommissioned">{{ row.datedecommissioned}}</td>
                                    <td style="width: 45px;" data-title="getLocalMessage('label.equipment.replacement.recommended')" sortable="replacementrecommended">{{ row.replacementrecommended}}</td>
                                </tr>
                                </tbody>
                            </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
